<template>
  <div>
    <h2>系统日志管理</h2>
    <a-button @click="clearExpiredLogs">清理过期日志</a-button>
    <a-table :data-source="logs" :columns="logColumns">
      <template #action="{ record }">
        <a-button @click="deleteLog(record.id)">删除</a-button>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟系统日志数据
const logs = ref([
  { id: 1, userId: 1, loginTime: '2024-02-10 10:00:00', action: '用户登录', operationTime: '2024-02-10 10:00:00' },
  { id: 2, userId: 2, loginTime: '2024-02-09 10:00:00', action: '创建课程', operationTime: '2024-02-09 10:05:00' },
]);

const logColumns = [
  { title: '用户 ID', dataIndex: 'userId' },
  { title: '登录时间', dataIndex: 'loginTime' },
  { title: '操作内容', dataIndex: 'action' },
  { title: '操作时间', dataIndex: 'operationTime' },
  { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
];

const clearExpiredLogs = () => {
  console.log('清理过期日志');
  // 这里可以添加实际的清理过期日志逻辑，如调用后端清理接口
};

const deleteLog = (id: number) => {
  console.log(`删除日志记录 ${id}`);
  // 这里可以添加实际的删除日志记录逻辑，如调用后端删除接口
};
</script>

<style scoped>
/* 系统日志管理页面样式 */
</style>
